<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="toSettleListDialogVisible"
             title="【方向键上下】选择要结算的记录"
             @close="handleClose"
             @open="handleOpen">
    <el-table ref="tableRef" :data="toSettleListAfterFilter" :row-class-name="chosenRowClass" border
              @row-click="handleRowClick" @row-dblclick="handleDBClick">
      <el-table-column align="center" label="枪号" prop="gunNo" width="50px"></el-table-column>
      <el-table-column align="center" label="油品" prop="fuelName"></el-table-column>
      <el-table-column align="center" label="升数" prop="litre"></el-table-column>
      <el-table-column align="center" label="金额" prop="amount"></el-table-column>
      <el-table-column :formatter="timeSimplify" align="center" label="时间" prop="endTime"></el-table-column>
    </el-table>
    <div class="footer-btn">
      <el-button type="primary" @click="confirmRecord">确定[Enter]</el-button>
      <el-button @click="closeDialog">取消[Esc]</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {mapGetters} from 'vuex'
import moment from 'moment'
import {lockFuelRecord} from '@/api/user'

var Mousetrap = require('mousetrap')
export default {
  name: 'ToSettleListDialog',
  data () {
    return {
      currentRow: null
    }
  },
  computed: {
    ...mapGetters([
      'toSettleListDialogVisible',
      'toSettleListAfterFilter',
      'stationId',
      'operator'
    ])
  },
  mounted () {
    this.bindKeyboard()
  },
  methods: {
    // 关闭对话框
    closeDialog () {
      this.$store.dispatch('hideToSettleListDialog')
    },
    // 对话框打开事件处理
    handleOpen () {
      console.log('handleOpen')
      this.$store.dispatch('showToSettleListDialog')
    },
    // 对话框关闭事件处理
    handleClose () {
      console.log('handleClose')
      this.$store.dispatch('hideToSettleListDialog')
      this.currentRow = null
    },
    // 日期显示简化
    timeSimplify (row, column) {
      return row.endTime ? moment(row.endTime).format('HH:mm:ss') : ''
    },
    // 行点击事件处理
    handleRowClick (row, column, event) {
      if (this.currentRow && this.currentRow.id === row.id) {
        this.$refs.tableRef.setCurrentRow()
        this.currentRow = null
      } else {
        this.$refs.tableRef.setCurrentRow(row)
        this.currentRow = row
      }
      console.log(row)
      console.log(this.currentRow ? '选中' : '没选中')
      console.log(this.toSettleListAfterFilter.indexOf(row))
    },
    handleDBClick (row, column, event) {
      console.log('handleDBClick')
      console.log(row)
      this.currentRow = row
      this.confirmRecord()
    },
    // 选中行样式
    chosenRowClass ({row, rowIndex}) {
      return (this.currentRow && row.id === this.currentRow.id) ? 'chosen' : (row.locked ? 'locked' : '')
    },
    // 键盘事件绑定
    bindKeyboard () {
      // 向上键盘
      Mousetrap.bind('up', () => {
        if (this.toSettleListDialogVisible) {
          console.log('up')
          var oldIdx = this.toSettleListAfterFilter.indexOf(this.currentRow)
          if (oldIdx > 0) {
            var newRow = this.toSettleListAfterFilter[oldIdx - 1]
            this.$refs.tableRef.setCurrentRow(newRow)
            this.currentRow = newRow
          } else if (oldIdx === -1 && this.toSettleListAfterFilter.length > 0) {
            newRow = this.toSettleListAfterFilter[this.toSettleListAfterFilter.length - 1]
            this.$refs.tableRef.setCurrentRow(newRow)
            this.currentRow = newRow
          }
        }
      })
      // 向下键盘
      Mousetrap.bind('down', () => {
        if (this.toSettleListDialogVisible) {
          console.log('down')
          var oldIdx = this.toSettleListAfterFilter.indexOf(this.currentRow)
          if (oldIdx > -1 && oldIdx < this.toSettleListAfterFilter.length - 1) {
            var newRow = this.toSettleListAfterFilter[oldIdx + 1]
            this.$refs.tableRef.setCurrentRow(newRow)
            this.currentRow = newRow
          } else if (oldIdx === -1 && this.toSettleListAfterFilter.length > 0) {
            newRow = this.toSettleListAfterFilter[0]
            this.$refs.tableRef.setCurrentRow(newRow)
            this.currentRow = newRow
          }
        }
      })
      // 回车键盘
      Mousetrap.bind('enter', () => {
        if (this.toSettleListDialogVisible) {
          console.log('enter')
          this.confirmRecord()
        }
      })
    },
    // 确认选中记录
    confirmRecord () {
      if (this.currentRow) {
        // 确认要结算该笔记录
        lockFuelRecord({id: this.currentRow.id, stationId: this.stationId, operator: this.operator}).then(res => {
          console.log(res)
          this.$store.dispatch('addToCartList', this.currentRow)
          this.$store.dispatch('showCartDialog')
          this.$store.dispatch('hideToSettleListDialog')
          setTimeout(() => {
            this.$bus.$emit('autoSelectCoupons')
          }, 200)
        }).catch(err => {
          console.log(err)
          this.$message.warning('该笔记录正在结算中！')
        })
      } else {
        this.$message.warning('请先选择要结算的记录')
      }
    }
  }
}
</script>
<style scoped>
.footer-btn {
  margin-top: 30px;
  text-align: center;
}
</style>
<style>
.el-table .chosen {
  background: #3C8B24;
  color: white;
}
</style>